<!DOCTYPE html>
<html>

<head lang="en">
    <title>骡窝日报</title>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="/js/plugins/bootstrap-4.1.1-dist/css/bootstrap.min.css">
    <script src="/js/plugins/jquery/jquery.min.js"></script>
    <script src="/js/plugins/bootstrap-4.1.1-dist/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="/css/font/css/font-awesome.min.css"/>
    <link rel="stylesheet" href="/css/reset.css"/>
    <link rel="stylesheet" href="/css/news.css"/>
    <link rel="stylesheet" href="/css/strategy.css"/>
    <script src="/js/plugins/jrender/jrender.min.js"></script>
    <link rel="stylesheet" href="/js/plugins/jquery-confirm/css/jquery-confirm.css">
    <script src="/js/plugins/jquery-confirm/js/jquery-confirm.js"></script>
    <script src="/js/plugins/dialog2/dialog.min.js"></script>
    <link rel="stylesheet" href="/js/plugins/dialog2/dialog.css">
    <script src="/js/common.js"></script>
    <link href="/css/ordercss/stylesheets/screen.css" media="screen, projection" rel="stylesheet" type="text/css" />
    <link rel="stylesheet" href="/css/ordercss/stylesheets/mobile.css" media='screen and (max-width:1024px)' />

    <style>
        .button1 {
            background-color: black; /* Green */
            border: none;
            color: red;
            padding: 15px 32px;
            text-align: center;
            text-decoration: none;
            display: inline-block;
            font-size: 16px;
        }
    </style>
    <script>
        $(function () {
            //当前页的input框
            var currentInput = $("#currentPage");
                
            //用于存储游记的数组容器
            var travelArr = [];

            //总页数
            var pages = 1;

            //得到当前登陆的用户对象
            var user = JSON.parse(sessionStorage.getItem("user"));
            if(!user){
                window.parent.location.href="/login.html"
            }else{
                function query() {
                    //获取当前页的值
                    var currentPage = currentInput.val();//
                    $.ajaxSettings.async = false;
                    $.get('/transactionRecords/records', {currentPage: currentPage,id:user.id}, function (data) {
                        //合并两个数组到第一个参数数组上
                        $.merge(travelArr, data.list);
                        //用于渲染时循环,循环时是取list的属性出来
                        var json = {
                            list: travelArr
                        };
                        console.log(travelArr);
                        //渲染数据
                        $("#commodity").renderValues(json, {
                            getHref: function (item, value) {
                                //item是当前要渲染数据的元素(a),value就是render-key获取的值
                                //获取要跳转的地址
                                var href = $(item).data("href");
                                console.log(item);
                                console.log(item);
                                //把id拼接进去,再设置到a连接的href属性上
                                $(item).attr('href', href + value);
                            },
                            getRecordId:function (item,value) {
                                //将获取到的id值拼接到里面
                                $(item).attr('data-RecordId',value);

                            }
                        });

                        //设置总页数
                        pages = data.pages;
                    })
                    //当前页input框+1
                    currentInput.val(parseInt(currentPage) + 1);
                   $.ajaxSettings.async = true;
                }
                //默认查询第一页的数据
                query();
                //当页面滚动条变化时，执行的函数
                $(window).scroll(function () {
                    if ($(document).scrollTop() + $(window).height() >= $(document).height()-9) {
                        var currentPage = currentInput.val();
                        //判断是否小于或等于最后一页,如果是就去查询
                        if (currentPage <= pages) {
                            query();
                        } else {
                            $(document).dialog({
                                type: 'notice',
                                infoText: '已经到底了!',
                                autoClose: 1000
                            });
                        }
                    }
                });
            };
            $(".deleteBtn").click(function () {
                var recordId=$(this).attr("data-RecordId");
                console.log(recordId);
                $.ajax({
                    url : "/transactionRecords" ,   // 处理的请求路径
                    type : "post" ,      // 此处发送的是delete请求（可变更为其他需要的请
                    data:{_method:"DELETE",id:recordId},
                    dataType : "json" , // 返回的数据类型为json类型
                    success : function(data) {
                        window.parent.location.reload();
                    }
                })
            })
        })
    </script>
</head>

<body>
<div class="search-head">
    <div class="row nav-search">
        <div class="col">
            <a href="profiles.html">
                <span><i class="fa fa-chevron-left"></i></span>
            </a>
        </div>
        <div class="col">
            <span>我的订单</span>
        </div>
        <div class="col"></div>
    </div>
</div>


<div class="search-head">
    <div class="row nav-search">
        <!--<div class="col-2">
            <a href="index.html">
                <span><i class="fa fa-chevron-left fa-2x"></i></span>
            </a>
        </div>
        <div class="col-10">
            <div class="input-group-sm search">
                <input class="form-control searchBtn" placeholder="搜索资讯">
            </div>
        </div>-->
    </div>
</div>

  <input type="hidden" name="currentPage" id="currentPage" value="1">

<div class="container news" id="commodity">
    <h6 class="news-title">我的订单</h6>
    <div class="records" render-loop="list">
            <div class="mainCommodity">
            <div class="shopInfo1">
                <div class="shopMsg">
                    <!--<input type="checkbox" name="shopMsg" id="shopMsg" class="shopMsg-input" autocomplete="off">-->
                    <label for="shopMsg">官方自营

                    </label></div>
                <!--<div class="changeCount">
                    <a href="#" class="substrCount">-</a>&lt;!&ndash;
									&ndash;&gt;<input type="text" value="1" autocomplete="off">&lt;!&ndash;
									&ndash;&gt;<a href="#" class="plusCount">+</a>
                </div>-->

                <div class="changeCount">
                   <!-- <input type="hidden" class="recordId" render-key="list.id" render-fun="getRecordId" >-->
                    <button1  class="deleteBtn" render-key="list.id" render-fun="getRecordId" data-RecordId="0">删除</button1>
                </div>
            </div>
            <div class="commodityInfo">
                <ul>
                    <li class="td-chk">
                        <div class="td-inner1">
                            <input type="checkbox" name="checkbox" autocomplete="off">
                        </div>
                    </li>
                    <li class="td-item1">
                        <a data-href="/productDetails.html?id=" render-key="list.commodity.id" render-fun="getHref">
                            <img render-src="list.commodity.picture" style="height: 100px" style="width: 100px">
                        </a>
                    </li>
                    <li class="td-info1">
                        <div class="item-info">
                            <div class="item-basis-info">
                                <a data-href="/productDetails.html?id=" render-key="list.commodity.id" render-fun="getHref">
                                    <sapn render-html="list.commodity.name">
                                    </sapn>
                                </a>
                            </div>
                        </div>
                        <div class="td-info-msg">
                            <p render-html="list.commodity.description"></p>
                            <div>
                                <span>成交时间:<p render-html="list.dealTime"></p></span>
                            </div>
                        </div>
                        <div class="td-innerMoney">
                            <!--<span>消耗积分:</span><p class="discount">49.00</p>
                            <p class="non-discount">￥79.00</p>
                            <em class="unitPrice">49.00</em>-->
                            <span>消耗积分:</span><p class="discount" render-html="list.dealPrice"></p>
                            <p class="non-discount" render-html="list.commodity.price"></p>
                            <em class="unitPrice" render-html="list.dealPrice"></em>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</div>


</body>
</html>